<template>
	<view class="page">
		<view class="top" :style="`padding-top:` + $store.state.StatusBar.statusBar + `px`">
			<view class="top-icon" @click="back">
				<u-icon name="arrow-left" size="42rpx" color='#fff'></u-icon>
			</view>
			<view class="top-title c-fff">{{ title }}</view>
		</view>
		<view :style="{height:$store.state.StatusBar.statusBar+`px`}" ></view>
		<scroll-view scroll-y="true" class="body" :style="{height:pageheigh-$store.state.StatusBar.statusBar-50+`px`}">
			<view class="user-box mt-36">
				<view class="user flex items-center mx-60 pt-36">
					<view class="avatar">
						<image class="img" mode="aspectFill" :src="info.user.pic"></image>
					</view>
					<view class=" f-28 ml-30">
						<view>{{info.user.nick}}</view>
						<view v-if="info.user.isVip==1">{{info.user.vipEndDate}}到期</view>
						<view v-else>您尚未开通vip</view>
					</view>
				</view>
				<view class="title" style="margin-top: 50rpx;">8大会员权益</view>
				<view class="flex flex-wrap">
					<view v-for="(item, i ) in vipauth" :key="i" style="width:33.33%" class="f-28 mb-36">
						<view class="w-full t-center">
							<image :src="item.image" style="width: 80rpx;height: 80rpx;" />
							<view class="c-primary f-30 f-middle">{{ item.label }}</view>
							<view class="c-fff mx-36 f-26" style="color: #F49C66;">{{ item.tips }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="title">会员开通</view>
			<view class="list">
				<view @click="changeItme(item)" class="item" :class="selectItem.id == item.id ? 'on' : ''"
					v-for="(item, index) in info.list">
					<view style="position: absolute; left:10rpx; top:10rpx; font-size: 26rpx;" class="c-fff color">
						{{ item.num }}个月
					</view>
					<view style="position: absolute; left:10rpx; top:80rpx; font-size: 36rpx;" class="c-fff color">
						￥{{ item.priceDay }}/天</view>
					<view style="position: absolute; left:10rpx; bottom:10rpx; font-size: 20rpx;" class="c-fff color">
						￥{{ item.price }}
					</view>
					<view
						style="position: absolute; right:0rpx; bottom:0rpx; color:#fff; font-size: 20rpx; background-color: #ffaa7f; padding: 5rpx 10rpx; border-radius: 20rpx;">
						{{ item.strKey }}
					</view>
				</view>
			</view>

			<view class="button" @click="open">
				<span v-if="selectItem.id != 0">￥{{ selectItem.price }}</span>
				立即开通
			</view>
			<!-- <view style="height: 100rpx;"></view> -->
		</scroll-view>
		
		<uni-popup ref="popup" type="center">
			<m-pay :money="selectItem.price+''" :projectId="selectItem.id" :type="2"></m-pay>
		</uni-popup>
	</view>
</template>

<script>
	import {
		to
	} from '@/utils/index.js';
	export default {
		data() {
			return {
				title: '会员中心',
				info: {
					user: {
						pic: ''
					},
					list: []
				},
				selectItem: {
					id: 0
				},
				vipauth: [{
						image: require('./img/vip_type1.png'),
						label: '查看访客',
						tips: '解锁来访喜欢你的人'
					},
					{
						image: require('./img/vip_type2.png'),
						label: '定制筛选',
						tips: '专属查看新人女神用户'
					},
					{
						image: require('./img/vip_type3.png'),
						label: '颜遇无限',
						tips: '无限次查看异性主页相册'
					},
					{
						image: require('./img/vip_type5.png'),
						label: '发布动态',
						tips: '解锁发布动态权限'
					},
					{
						image: require('./img/vip_type6.png'),
						label: 'VIP标识',
						tips: '专属排面人群中更闪亮'
					},
					{
						image: require('./img/vip_type7.png'),
						label: '添加好友',
						tips: '突破每日解锁上限'
					},
					{
						image: require('./img/vip_type8.png'),
						label: '消息畅聊',
						tips: '突破聊天人数上限'
					},
					{
						image: require('./img/vip_type9.png'),
						label: '位置漫游',
						tips: '切换任意城市位置漫游'
					},

				]
			}
		},
		onLoad(option) {
			this.pageheigh = uni.getSystemInfoSync().windowHeight;
			uni.onWindowResize((res) => {
				this.pageheigh = res.size.windowHeight;
			});

		},
		onShow(option) {
			this.getInfo();
		},
		methods: {
			to,
			back() {
				to()
			},
			open() {
				if (this.selectItem.id <= 0) {
					uni.showToast({
						title: "请选择开通时间",
						icon: "none"
					})
				}
				this.$refs.popup.open()
			},
			async getInfo() {
				let res = await this.$c.post("/app/vip/list")
				if (res.code == 0) {
					for (let i in res.data.list) {
						let item = res.data.list[i]
						if (this.selectItem.id == 0) {
							this.selectItem = item
						}
					}
					
					this.info = res.data;
					console.log(this.info);
				}
			},
			changeItme(item) {
				this.selectItem = item
			},
			async submit() {
				let res = await this.$c.post("/app/exchange/exchange?id=" + item.id)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					return;
				}
				uni.showToast({
					title: "兑换成功",
					icon: "none"
				})
				setTimeout(() => {
					this.getInfo()
				}, 1000)
			}
		}
	}
</script>

<style scoped lang="scss">
	.user-box {
		background: url('./img/vip_bg.png') no-repeat;
		width: 720rpx;
		// height: 1000rpx;
		background-size: 100% 100%;
		margin: 24rpx auto 0 auto;
	}

	.page {
		display: flex;
		flex-direction: column;
		width: 100vw;
		padding: 30rpx;
		height: 100vh;
		// background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
		transform: translateX(-30rpx);
	}

	.top {
		position: fixed;
		top: 0rpx;
		width: 100%;
		// background-color: #e3ecfb;
		z-index: 999;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx;
	}

	.top-icon {
		position: absolute;
		left: 30rpx;
		z-index: 99;
		width: 30rpx;
		height: 30rpx;
	}

	.top-title {
		line-height: 50rpx;
		display: block;
		height: 50rpx;
		z-index: 99;
	}

	.body {
		// flex: 1;
		margin-top: 10rpx;
		padding-top: 40rpx;

		.user {
			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			text {
				color: #00c8c8;
				font-size: 24rpx;
			}
		}

		.title {
			color: #ffaa7f;
			text-align: center;
			margin: 20rpx;
		}

		.icon-list {
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			height: 400rpx;
			width: 100%;

			.icon-item {
				width: calc(100%/3);
				margin-top: 30rpx;
				margin-bottom: 30rpx;
				float: left;
				text-align: center;

				image {
					width: 60rpx;
					height: 60rpx;
				}

				text {
					display: block;
					color: #fff;
				}
			}
		}

		.list {
			margin-top: 20rpx;

			.on {
				// background-color: #ffaa7f;
				/* background: linear-gradient(to right, #ffaa7f, #ffe75e, #ffaa7f); */
				color: $uni-color-primary !important;

				.color {
					color: $uni-color-primary !important;
				}

				border: 1px solid $uni-color-primary !important;
			}

			.item {
				border-radius: 20rpx;
				border: 1px solid #fff;
				width: 26%;
				height: 200rpx;
				float: left;
				margin-left: 5%;
				margin-top: 30rpx;
				position: relative;
				color: #fff;
			}
		}
	}

	.button {
		background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);
		color: #fff;
		padding: 10rpx 30rpx;
		height: 60rpx;
		border-radius: 50rpx;
		font-size: 34rpx;
		line-height: 60rpx;
		width: 80%;
		margin: 0 auto;
		text-align: center;
		margin-top: 300rpx;
	}
</style>